#{extends '/F/_web.html'/}
<div class="blog_single">
    <article class="post">

        <div class="post_date">
            <span class="day">${post.created_at.format('dd')}</span>
            <span class="month">${post.created_at.format('MM')}</span>
        </div>
        <div class="post_content">
            <div class="post_meta">
                <h2>
                    <a href="@{F.view_post(post.id)}">${post.subject}</a>
                </h2>

                <div class="metaInfo">
                    <span><i class="fa fa-calendar"></i> <a href="#">${post.created_at.format('yyyy-MM-dd')}</a> </span>
                    <span><i class="fa fa-user"></i> 作者 <a href="#">${post.author}</a> </span>
                    <span><i class="fa fa-tag"></i> <a href="@{F.view_board(post.board.id)}">${post.board.name}</a> </span>
                    <span><i class="fa fa-comments"></i> <a href="#">${post.reply_cnt}</a></span>
                    <span> <a ajax href="@{Forum.favor(post.id)}"><i class="fa fa-heart-o"></i></a>${post.favorite_cnt}</span>
                </div>
            </div>
            <div class="main_thumbnail">
                #{list post.main_images, as:'mi'}
                <img  src="@{Resources.raw(mi.hash,'s')}"/>
                #{/list}
            </div>
            ${post.content.raw()}
        </div>
    </article>


</div>
#{if post.state == 0}
<div class="news_comments">
    <div class="dividerHeading">
        <h4><span>评论 (${post.reply_cnt})</span></h4>
    </div>
    <div id="comment">
        <ul id="comment-list">
            #{list post.load_replies(), as:"reply"}
            <li class="comment">
                <div class="avatar"><img alt="" src="@{'/web/images/avatar_1.png'}" class="avatar"></div>
                <div class="comment-container">
                    <h4 class="comment-author"><a href="#">${reply.user.nickname}</a></span></h4>

                    <div class="comment-meta"><a href="javascript:undefined" class="comment-date">${reply.created_at}</a><a
                            class="comment-reply-link" href="javascript:reply_to(${reply.id},'${reply.user.nickname}')">回复 &raquo;</a></div>
                    <div class="comment-body">
                        ${reply.content?.raw()}
                    </div>
                    <div>
                        #{list reply.resources, as:"reply_res"}
                        <img src="@{Resources.raw(reply_res.hash,'raw')}" style="max-width:100px;max-height:100px;"/>
                    </div>
                    #{/list}
                </div>
            </li>
            #{/list}
        </ul>
    </div>

    <a href="#" name="reply-form"></a>
    <!-- /#comments -->
    <div class="dividerHeading">
        <h4><span>发表评论</span></h4>
    </div>

    <form class="form " method="post" action="@{Forum.save_reply}" id="reply_form">
        <input type="hidden" name="post_id" value="${post.id}">
        <input type="hidden" name="reply_id" value="-1" >
        <div class="comment-box row">
            <div class="col-sm-12">
                #{Editor.Toolbar/}
                #{Editor.Editor contentTarget:'reply-content', formTarget:'reply_form'/}
                <textarea style="display:none" name="content" type="text" class="form-control" id="reply-content" placeholder="正文"></textarea>
            </div>
        </div>
        <br>
        <button class="btn btn-lg btn-default" type="submit">回复</button>
    </form>
</div>
#{/if}

#{set 'moreScripts'}

<script>
    $(document).ready(function () {
        var fullEditor = new Quill('#full-editor', {
            modules: {
                'toolbar': {container: '#full-toolbar'},
                'image-tooltip': true
            },
            theme: 'base'
        });
        $(".ql-image-tooltip>div.preview>span").text("拖放文件到这里或者点击下面空白处").css('position', 'absolute').css('top', '0px');
        $(".ql-image-tooltip>a.insert").text("插入");
        $(".ql-image-tooltip>a.cancel").text("取消");
        new Dropzone(".ql-image-tooltip>div.preview", {
            url: "@{Resources.file_upload}",
            init: function () {
                this.on("success", function (file) {
                    $(".ql-image-tooltip>div.preview>span").hide();
                    var obj = $.parseJSON(file.xhr.responseText);
                    $(".ql-image-tooltip>input.input").val(window.location.origin + "/rest/resources/" + obj.datas.resource.hash);
                });
            },
            previewTemplate: document.querySelector('#template-container').innerHTML
        });
        $("#reply_form").submit(function (e) {
            var html = fullEditor.getHTML();
            $("#reply-content").val(html);
        });
    });

</script>


<script>

    function scrollToAnchor(aid) {
        var aTag = $("a[name='" + aid + "']");
        $('html,body').animate({scrollTop: aTag.offset().top}, 'slow');
    }

    function reply_to(reply_id, nickname) {
        var replyId = $('input[name=reply_id]', '#reply_form');
        replyId.val(reply_id);
        console.log(replyId.val());
        scrollToAnchor('reply-form');
        $('div.ql-editor').html('<div>@' + nickname + '</div>' + $('div.ql-editor').html());
        $('div.ql-editor').focus();
    }

</script>
#{/set}